 /**
 * Created by Administrator on 2018/7/12.
 */

$(function(){

    function geturldata(option) {
        var result='';
        $.ajax({
            type : "get",
            url : option.url,
            dataType:"json",
            async:false,
            contentType: "application/x-www-form-urlencoded; charset=utf-8",
            success : function(data) {
                result=data;
            }
        });
        return result;
    }

    $('.hrcpus').text(geturldata({url:"/api/cpus"}));
    $('.hrmemory').text(geturldata({url:"/api/memorys"}));
    $('.hrstorages').text(geturldata({url:"/api/storages"}));
    $('.hrsystems').text(geturldata({url:"/api/systems"}));
    var hrcpu = echarts.init(document.getElementById('hrcpu')),
        hrneicun = echarts.init(document.getElementById('hrneicun')),
        hrcunchu = echarts.init(document.getElementById('hrcunchu'));
    hrcpu.setOption(hroption({name:'CPU', value:40,color:'#1fc4ba'}), true);
    hrneicun.setOption(hroption({name:'内存', value:30,color:'#adde93'}), true);
    hrcunchu.setOption(hroption({name:'存储', value:60,color:'#1d79ff'}), true);
    //仪表盘
    function hroption(data) {
        return {

            series : [
                {
                    type:'gauge',
                    radius:'100%',

                    axisLine:{
                        lineStyle:{
                            width:3,
                            color:[[1, data.color]]
                        }
                    },
                    axisTick:{  //坐标轴小标记
                        show:true,
                        splitNumber:6,
                        length:10,
                        lineStyle:{
                            width:5,
                            type:'solid',
                            color:data.color
                        }
                    },
                    splitLine:{
                        show:true,
                        length:6,
                        lineStyle:{
                            width:10,
                            color:'#125634'
                        }
                    },
                    /*axisTick:{ //刻度样式
                        show:false
                    },*/
                    detail:{//显示详情
                        width:100,
                        height:30,
                        textStyle:{
                            color:data.color
                        }
                    },
                    axisLabel:{ //刻度数值
                        show:false,
                    },
                    pointer:{
                        show:true,
                        length:'50%',
                        width:5
                    },
                    splitNumber:1,
                    center:['50%','95%'],
                    title:{  // 显示文字
                        show:true,
                        offsetCenter:[0,'-55%'],
                        textStyle:{
                            color:data.color,
                            fontWeight:300,
                        }
                    },
                    legendHoverLink:true,
                    data:[{value: data.value, name:data.name}]
                },

            ]

        }
    }
//系统访问趋势
    function fangwenOption(data) {
        return {
            tooltip : {
                trigger: 'axis',
                showDelay : 0,

                axisPointer:{
                    show: true,
                    type : 'cross',
                    lineStyle: {
                        type : 'dashed',
                        width : 1,
                        color:'#9372e7'
                    },

                }
            },
            grid:{
                top:30,
                bottom:40
            },
            calculable: true,
            xAxis: [
                {
                    type: 'category',
                    boundaryGap: false,
                    data: data.wholemonth,
                    axisLine:{
                        lineStyle:{
                            color:'#4d6b97'
                        }
                    },
                }
            ],

            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#4d6b97'
                        }
                    },
                    splitNumber:2,
                    splitLine:{
                        lineStyle:{
                            color:'#05306f'
                        }
                    }
                }
            ],
            series: [
                {
                    name: '访问量',
                    type: 'line',
                    data: data.monthdata,
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ],
                        itemStyle:{
                            normal:{
                                color:'#4d6b97',
                                lineStyle:{
                                    color:'#4d6b97'
                                }
                            }
                        }

                    },
                    symbol: 'none',
                    smooth:true,//光滑显示
                    itemStyle:{
                        normal:{
                            color:'#9372e7'
                        }
                    },
                }
            ]
        };
    }
    var wholemonth=[],
        monthdata=[];
    for(var i=1;i<31;i++){
        wholemonth.push(i);
        monthdata.push((Math.ceil(Math.random()*10))*i)
    }

    var fangwenecharts = echarts.init(document.getElementById('fangwenecharts'));
    var datafangwen = {wholemonth:wholemonth, monthdata:monthdata};
    fangwenecharts.setOption(fangwenOption(datafangwen))

    //物理攻击
    var wuliecharts = echarts.init(document.getElementById('wuliecharts'));
    function wuliOption(data) {
        return {

            tooltip : {
                trigger: 'axis',
                showDelay : 0,
                axisPointer:{
                    show: true,
                    type : 'cross',
                    lineStyle: {
                        type : 'dashed',
                        width : 1
                    }
                }
            },
            grid:{
                top:30,
                bottom:40
            },
            xAxis : [
                {
                    type : 'value',
                    scale:true,//脱离0值比较
                    data:data.wholemonth,

                    power:1,//精度1
                    axisLabel : {
                        formatter: '{value}'
                    },
                    axisLine:{
                        lineStyle:{
                            color:'#4d6b97'
                        }
                    },
                    splitLine:{
                        show:false
                    }
                }
            ],
            yAxis : [
                {
                    type : 'value',
                    scale:true,
                    axisLine:{
                        lineStyle:{
                            color:'#4d6b97'
                        }
                    },
                    splitNumber:2,
                    splitLine:{
                        lineStyle:{
                            color:'#05306f',
                            type:'dashed'
                        }
                    },
                    axisLabel : {
                        formatter: '{value}'
                    }
                }
            ],
            series : [
                {
                    name:'显示',
                    type:'scatter',
                    data: data.monthdata,
                    markLine : {
                        data : [
                            {type : 'average', name: '平均值'}
                        ]
                    },
                    symbolSize: 8,
                    itemStyle:{
                        normal:{
                            color:'#1fc4ba'
                        }
                    }
                }
            ]
        };
    }
    wuliecharts.setOption(wuliOption(datafangwen))
//左侧使用资源排行
    var hr_use_source_data=[
        {name:'XXX系统',barwidth:'80%', barval:80,showdata:'23365M'},
        {name:'XXX系统',barwidth:'70%', barval:70,showdata:'5455M'},
        {name:'XXX系统',barwidth:'72%', barval:72,showdata:'5043M'},
        {name:'XXX系统',barwidth:'70%', barval:70,showdata:'4555M'},
        {name:'XXXX系统',barwidth:'62%', barval:62,showdata:'4435M'},
        {name:'XXX系统',barwidth:'61%', barval:61,showdata:'4005M'},
        {name:'XXXX系统',barwidth:'55%', barval:55,showdata:'2665M'},
        {name:'XXX系统',barwidth:'53%', barval:53,showdata:'2333M'},
        {name:'XXX系统',barwidth:'52%', barval:52,showdata:'2125M'},
        {name:'XXX系统',barwidth:'50%', barval:50,showdata:'1345M'},
        {name:'XXX系统',barwidth:'40%', barval:40,showdata:'1235M'},
        {name:'XXX系统',barwidth:'30%', barval:30,showdata:'985M'},
        {name:'XXX系统',barwidth:'28%', barval:28,showdata:'675M'},
        {name:'XXX系统',barwidth:'20%', barval:20,showdata:'565M'},
        {name:'XXX系统',barwidth:'15%', barval:15,showdata:'345M'},
        {name:'XXX系统',barwidth:'12%', barval:12,showdata:'235M'},
        {name:'XXX系统',barwidth:'10%', barval:10,showdata:'175M'},
        {name:'XXX系统',barwidth:'8%', barval:8,showdata:'65M'},
        {name:'XXX系统',barwidth:'4%', barval:4,showdata:'65M'},
        {name:'XXX系统',barwidth:'3%', barval:3,showdata:'55M'},
        {name:'XXX系统',barwidth:'2%', barval:2,showdata:'47M'},
        {name:'XXX系统',barwidth:'2%', barval:2,showdata:'35M'}
    ];
    function showlistdata(sourcelist) {
        var append_use_data='';
        for(var i in sourcelist){
            append_use_data += selflistbysource(sourcelist[i])
        }
        return append_use_data;
    }
    $(".hr_use_source").append(showlistdata(hr_use_source_data));

// 右侧系统访问排行
    var hrdata = [
        {name:'XXX系统',access:7304696,state:'down',changenum:'7304'},
        {name:'XXX系统',access:1304696,state:'down',changenum:'3046'},
        {name:'XXX系统',access:12578,state:'down',changenum:'851'},
        {name:'XXX系统',access:985123,state:'up',changenum:'951'},
        {name:'XXX系统',access:546558,state:'down',changenum:'123'},
        {name:'XXX系统',access:546214,state:'up',changenum:'621'},
        {name:'XXX系统',access:11258,state:'down',changenum:'258'},
        {name:'XXX系统',access:5423,state:'down',changenum:'142'},
        {name:'XXX系统',access:4125,state:'up',changenum:'134'},
        {name:'XXX系统',access:985123,state:'down',changenum:'951'},
        {name:'XXX系统',access:546558,state:'down',changenum:'123'},
        {name:'XXX系统',access:546214,state:'down',changenum:'621'},
        {name:'XXX系统',access:11258,state:'down',changenum:'258'},
        {name:'XXX系统',access:546214,state:'down',changenum:'621'},
        {name:'XXX系统',access:11258,state:'down',changenum:'258'},
        {name:'XXX系统',access:5423,state:'-',changenum:'142'},
        {name:'XXX系统',access:4125,state:'up',changenum:'134'}
    ];

    $(".hrlistbody").append(sysList(hrdata));


    window.addEventListener('resize',function () {
        fangwenecharts.resize();
        wuliecharts.resize();
        hrcpu.resize();
        hrneicun.resize();
        hrcunchu.resize();
    })



})
